<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册列表</title>
    <!-- 公共 -->
    <script type="text/javascript" charset="utf-8" src="/common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/copyright.js"></script>

    <link href="css/albumIndex.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" charset="utf-8" src="js/albumIndex.js"></script>
    <style>
        .introTitle {
            color: white !important;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="functionWrapper">
        <a id="createAlbum" href="#" class="btn btn-danger">所有相册</a>

<!--        <div class="storeDisWrapper">总容量<span id="storageid"></span>M</div>-->
    </div>
    <!-- 相册列表 -->
    <div class="photoListWrapper" id="albumListId">
        <div class="albumListNull" v-cloak v-if="albumList.length == 0">暂无相册</div>
        <ul class="photoList" v-if="albumList.length != 0">
            <li v-for="(album,index) in albumList"
                class="list-item"
                @mouseenter="photoListEnter(index)"
                @mouseleave="photoListLeave(index)"
                :key="index"
            >
                <div class="list-item-wrapper">
                    <div style="height: 150px; position: relative;">
                        <img v-if="index<5" class="list-item-hot-icon" src="/album/image/hot.png" alt="">
                        <a class="albumImageLink">
                            <img class="photoCover" :src="album.imageUrl" alt="photo4">
                            <span class="pic-num-wrap">
                            <span class="photoNumber">{{album.imageCount}}</span>
<!--                            <span class="primarirycount">点赞数：{{album.primarirycount}}</span>-->
<!--                            <span class="username">用户名：{{album.username}}</span>-->

                        </span>
                        </a>
                    </div>
                </div>
                <div class="caption">
<!--                    <a :href="album.showAlbumUrl" class="photoName" title="查看照片" role="link">{{album.albumName}}</a>-->
                    <a :href="album.showAlbumUrl" class="photoName" :title="'用户名：'+album.username+'点赞数：'+album.primarirycount" role="link">用户名：{{album.username}} 点赞数：{{album.primarirycount}}</a>
                    <div class="editWrapper">
                        <!--                        <a title="编辑相册信息" @click="editAlbumClick(album,index)" data-method="editAlbum" data-type="auto"-->
                        <!--                           class="editButton" :data-id="album.albumId" :data-index="index">-->
                        <!--                            <img src="image/edit.png" alt="edit" style="width: 14px;height:16px;">-->
                        <!--                        </a>-->
                        <!--                        <a data-method="deleteAlbum" @click="deleteAlbumClick(album,index)" title="删除相册" data-type="auto"-->
                        <!--                           :data-id="album.albumId" :data-index="index">-->
                        <!--                            <img src="image/delete.png" alt="delete">-->
                        <!--                        </a>-->
                    </div>
                </div>
                <a class="photoListIntro" title="查看照片" v-show="album.isShow" :href="album.showAlbumUrl">
                    <h4 class="introTitle" style="margin-top: 10px;">相册介绍:</h4>
                    <p class="introText" >{{album.albumintro}}</p>
                </a>
                <div class="privateAlbum" v-if="album.albumpower == '0'">
                    <span class="privateAlbumText">私密</span>
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="navbottomBarId"></div>

</body>
</html>